<template>
    <div class="activity f f-ac f-jc">
        <div class="activity-body">
            <Sub-title label="享活动" class="mt-70">
                <My-btn slot="right" label="查看更多" size="14" width="96" @click="handleMore" />
                <img src="../../../assets/cloud.png" class="custom" slot="custom" />
            </Sub-title>
            <div class="f f-jb mt-30" v-for="(i, k) in list" :key="k" v-if="k==0" @click="handleDetail(i)">
                <div class="body-left">
                    <img :src="baseUrl+i.image" width="100%" height="100%" />
                </div>
                <div class="body-right">
                    <div class="body-right-title">
                        {{i.title}}
                    </div>
                    <div class="body-right-content mt-20" v-html="i.content" />
                       
                    <div class="body-right-row mt-10">{{i.start_time}}</div>
                    <div class="body-right-row mt-10">地址：{{i.address}}</div>
                    <div class="body-right-btn mt-10" @click="handleSignUp(i)">{{i.test}}</div>
                </div>
            </div>
            <div class="f f-ac f-jb mt-20">
                <div class="f-item" v-for="(i, k) in list" :key="k" @click="handleDetail(i)" v-if="k!=0">
                    <img :src="baseUrl+i.image" width="100%" height="100%" />
                    <div class="f-item-title">{{ i.title }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        actList
    } from "@/utils/active/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                list: [],
            };
        },
        created() {
            this.getList();
        },
        mounted() {},

        methods: {
            getList() {
                this.loading = true;
                let that = this
                let data = {
                    activity_category_id: '',
                    title: '',
                    type: '',
                    page: 1,
                    limit: 4,
                    starttime: '',
                    type_time: '',
                    endtime: '',
                    recommend: 2
                }
                actList(data).then((response) => {
                    that.list = response.data.list
                    console.log(response.data)
                    that.loading = false;
                });
            },
            // 查看更多
            handleMore() {
                this.$router.push("/activity");
            },
            // 查看详情
            handleDetail(i) {
                this.$router.push({
                    path: "/activity/details",
                    query: {
                        id: i.id,
                    },
                });
            },
            // 报名
            handleSignUp(i) {
                if (i.test == '我要报名') {
                    this.$router.push({
                        path: "/activity/signUp",
                        query: {
                            detail: JSON.stringify(i),
                        },
                    });
                }

            },
        },
    };
</script>

<style lang="scss" scoped>
    .activity {
        width: 100%;
        height: 925px;
        /* background-color: #f5f5f5; */

        &-body {
            width: 1200px;
            height: 100%;

            .custom {
                position: absolute;
                width: 70px;
                right: 0;
                top: -18px;
            }

            .body-left {
                width: 772px;
                height: 415px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 20px;
                cursor: pointer;
            }

            .body-right {
                width: 408px;
                height: 415px;
                padding: 20px;
                font-size: 14px;
                box-sizing: border-box;
                background-color: #fff;
                border-radius: 5px;
                overflow: hidden;

                &-title {
                    color: #000;
                    font-weight: 600;
                }

                &-content {
                    color: #909090;
                    max-height: 218px;
                    overflow-y: auto;
                }

                &-row {
                    color: #313131;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                &-btn {
                    user-select: none;
                    width: 100%;
                    height: 34px;
                    line-height: 34px;
                    text-align: center;
                    border-radius: 5px;
                    color: #fff;
                    background-color: #193980;

                    &:hover {
                        cursor: pointer;
                        background-color: #2652b1;
                    }

                    &:active {
                        background-color: #21438e;
                    }
                }

                .disabled {
                    background-color: #d9d9d9;
                    color: #fff;
                    cursor: no-drop;
                    pointer-events: none;
                }
            }

            .f-item {
                flex: 1;
                height: 237px;
                margin-right: 20px;
                border-radius: 5px;
                overflow: hidden;
                position: relative;

                &:hover {
                    cursor: pointer;
                }

                &:last-child {
                    margin-right: 0;
                }

                &-title {
                    position: absolute;
                    bottom: 40px;
                    left: 0;
                    right: 0;
                    text-align: center;
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
        }
    }
</style>